import React from 'react'
import {connect} from "react-redux"
import { withRouter } from 'react-router-dom';
import {Layout} from 'antd'
import "./login/login.css"
import LoginForm from './login/LoginForm.js'

class Login extends React.Component{
	render(){
		return(
			<Layout className="common-layout">
				<Layout.Header>
					header
				</Layout.Header>
				<Layout.Content className="l-content">
					<LoginForm
						onFinish={this.handleFinish.bind(this)}
						onFinishFailed={this.handleFinishFailed.bind(this)}
					 />
				</Layout.Content>
				<Layout.Footer className="l-footer">
					China Unionpay©2018 Created by SKY D.
				</Layout.Footer>
			</Layout>
		)
	}
	handleFinish(values){  //ant design提供的方法名，看着有点奇怪
		fetch("http://localhost:9000/user/login",{
			method:"POST",
			headers:{ 
	            'Accept': 'application/json',
	            'Content-Type': 'application/json;charset=UTF-8'            
	        },
			body:JSON.stringify(values)
		}).then((response)=>{			
			if(response.status===200){
				response.json().then((result)=>{
					window.localStorage.setItem("yuntu_index_user",JSON.stringify(result.data))				
					this.props.dispatch({
						type:"user_signin_event",
					 	user:result.data
					});
					//可以使用withRouter让当前组件带上route的属性，其history属性实现跳转；
					//	可以获取状态管理中用户被强制拦截到登录页面前的路径，让这里的href指向他，显得代码更加专业
					window.location.href="/home/index"
				})
			}
		})
	}
	handleFinishFailed(error){
		console.log(error);
	}
}

export default connect()(withRouter(Login))
